<template>
  <div class="app-container home">
    <!--    <div class="other" v-if="userStore.roles.findIndex(item => item === 'student') === -1">-->
    <!--      <HonorWall/>-->
    <!--    </div>-->
    <!--    <div class="student" v-else>-->
    <!--      <SchoolHonor v-if="state.detailsForm.stuId" :stuId="userStore.stuId"/>-->
    <!--    </div>-->
    <div class="topBox">
      <el-card class="card1">
        <div class="header">
          <div class="tit">优秀毕业生展示</div>
          <div class="select">
            <span>姓名</span>
            <el-select v-model="state.searchForm2.id"
                       placeholder="请选择"
                       style="width: 200px;"
                       filterable
                       remote
                       reserve-keyword
                       clearable
                       @change="changeStu2"
                       :remote-method="searchStudent">
              <el-option v-for="item in state.studentList" :key="item.id"
                         :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="item" v-for="item in state.honorStuList">
            <div class="img">
              <img :src="getRealSrc(item.sysUser.avatar)">
            </div>
            <div class="name">{{ item.stuName }}</div>
          </div>
        </div>
        <pagination
            v-show="state.total2 > 0"
            :total="state.total2"
            v-model:page="state.searchForm2.pageNum"
            v-model:limit="state.searchForm2.pageSize"
            layout=" prev,pager, next, jumper"
            @pagination="getDataList2()"
        />
      </el-card>
      <el-card class="card1">
        <div class="header">
          <div class="tit">学生优秀成果展示</div>
          <div class="select">
            <span>姓名</span>
            <el-select v-model="state.searchForm1.id"
                       placeholder="请选择"
                       style="width: 200px;"
                       filterable
                       remote
                       reserve-keyword
                       clearable
                       @change="changeStu"
                       :remote-method="searchStudent">
              <el-option v-for="item in state.studentList" :key="item.id"
                         :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="item" v-for="item in state.honorWallList">
            <div class="img" v-if="item.acFileType === 'image'">
              <ImagePreview :src="item.acFile"/>
            </div>
            <div class="img" v-else-if="item.acFileType === 'video'">
              <VideoPreview :src="item.acFile" width="100%"/>
            </div>
            <div class="img" v-else-if="item.acFileType === 'document'">
              <div class="document">
                <el-link type="primary" @click="handleShowDocument(item.acFile)">查看文档</el-link>
              </div>
            </div>
            <div class="name">{{ item.stuName }}</div>
            <div class="tip">
              {{ item.acTitle }}
            </div>
          </div>
        </div>
        <pagination
            v-show="state.total1 > 0"
            :total="state.total1"
            v-model:page="state.searchForm1.pageNum"
            v-model:limit="state.searchForm1.pageSize"
            layout=" prev,pager, next, jumper"
            @pagination="getDataList1()"
        />
      </el-card>

    </div>
    <div class="scrollNotice">
      <el-carousel height="50px">
        <el-carousel-item v-for="item in state.top5List" :key="item" indicator-position="none" arrow="never">
          <p>{{ item.auditStu }}:{{ item.auditTitle }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row class="statistics">
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>应届学生数量</span>
              <div class="icon">
                <el-icon>
                  <Avatar/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.studentCount }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>学科竞赛获奖数量</span>
              <div class="icon icon2">
                <el-icon>
                  <HelpFilled/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num2 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>大创项目结项数量</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num3 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>发表论文数量</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num4 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>专利、软著数量</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num5 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>应届党员数量</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num7 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>参与实战人次</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num8 }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="countCard">
          <el-card>
            <div class="title">
              <span>资格证书数量</span>
              <div class="icon icon3">
                <el-icon>
                  <Histogram/>
                </el-icon>
              </div>
            </div>
            <div class="number">{{ state.countCard.num10 }}</div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import useUserStore from "@/store/modules/user.js";
import ImagePreview from "@/components/ImagePreview/index.vue";

import {
  getExcellentStudentApi,
  getHonorTop5Api,
  getHonorWall2Api,
  getStatisticsApi,
  getStudentListApi
} from "@/api/school.js";
import {isExternal} from "@/utils/validate.js";


const userStore = useUserStore()
const state = reactive({
  honorWallList: [],
  honorStuList: [],
  searchForm1: {
    pageNum: 1,
    pageSize: 6,
    id: '',
  },
  searchForm2: {
    pageNum: 1,
    pageSize: 6,
    id: '',
  },
  total1: 0,
  total2: 0,
  studentList: [],
  top5List: [],
  countCard: {},
})

/**
 * 切换学生
 */
const changeStu = (id) => {
  state.searchForm1.stuId = id
  getDataList1()
}

const changeStu2 = (id) => {
  state.searchForm2.stuId = id
  getDataList2()
}

const searchStudent = async (query) => {
  const res = await getStudentListApi({stuName: query})
  if (res.code == 200) {
    state.studentList = res.data
  }
}

const getDataList1 = async () => {
  const res = await getHonorWall2Api(state.searchForm1)
  if (res.code == 200) {
    state.honorWallList = res.rows
    state.total1 = res.total
  }
}

const getDataList2 = async () => {
  const data = {
    id: state.searchForm2.stuId
  }
  const res = await getExcellentStudentApi(data)
  if (res.code == 200) {
    state.honorStuList = res.rows
    state.total2 = res.total
  }
}

const getDataList3 = async () => {
  const res = await getHonorTop5Api()
  if (res.code == 200) {
    state.top5List = res.data
  }
}

const getData4 = async () => {
  const res = await getStatisticsApi()
  if (res.code == 200) {
    state.countCard = res.data
  }
}

const handleShowDocument = (src) => {
  const filePath = getRealSrc(src)
  window.open(filePath)
}

function getRealSrc(src) {
  if (!src) {
    return;
  }
  let real_src = src.split(",")[0];
  if (isExternal(real_src)) {
    return real_src;
  }
  return import.meta.env.VITE_APP_BASE_API + real_src;
}


onMounted(() => {
  getDataList1()
  getDataList2()
  getDataList3()
  getData4()
})
</script>

<style scoped lang="scss">
.countCard{
  margin-bottom: 20px;
}
.statistics {
  margin-top: 20px;

  .el-card {
    margin-right: 20px;

    .title {
      color: #82848c;
      font-size: 14px;
      display: flex;
      justify-content: space-between;

      .icon {
        background: #ebeefe;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3e5bf9;
      }

      .icon2 {
        background: #f4f5f7;
        color: #8f9aae;
      }

      .icon3 {
        background: #f1f9eb;
        color: #72c438;
      }
    }

    .number {
      font-size: 30px;
      font-weight: bolder;
    }
  }
}

.scrollNotice {
  margin-top: 20px;

  p {
    margin: 0;
    background: rgba(38, 35, 126, 0.5);
    height: 50px;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
}

:deep(.el-carousel__arrow) {
  opacity: 0;
}

.topBox {
  display: flex;
  justify-content: space-between;

  .header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;

    .tit {
      font-weight: 800;
      font-size: 28px;
      color: #152584;
    }

    .select {
      display: flex;
      align-items: center;

      span {
        font-weight: 500;
        font-size: 14px;
        color: #484848;
        // 禁止换行
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
}

.card1 {
  width: 48%;
}

.items {
  height: 500px;
  margin-top: 20px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr);

  .item {
    .name {
      text-align: center;
      margin: 10px 0px;
      font-weight: 500;
      font-size: 22px;
    }

    .tip {
      font-weight: 800;
      color: #000000;
      text-align: center;
    }

    .img {
      width: 100%;
      height: 150px;
      overflow: hidden;
      display: flex;
      align-items: center;
      img {
        width: 100%;
      }
    }
  }
}


</style>

